<template>
	<div class="music-player-outer">
		<div class="nav-head"><router-link to="/layout/musLib"><img src="../../../assets/icon-return45.png"></router-link><div class="title">歌手</div></div>
		<div class="top-blank"></div>
		<div class="music-sort">
			<div class="area">
				<div class="title">地区</div>
				<div class="kinds">
					<span>内地</span>
					<span>港台</span>
					<span>欧美</span>
					<span>日本</span>
					<span>韩国</span>
				</div>	
			</div>
			<div class="type">
				<div class="title">种类</div>
				<div class="kinds">
					<span>流行</span>
					<span>嘻哈</span>
					<span>民谣</span>
					<span>电子</span>
					<span>摇滚</span>
				</div>		
			</div>
			<div class="style">
				<div class="title">方式</div>
				<div class="kinds">
					<span class="onew">男</span>
					<span class="onew">女</span>
					<span>组合</span>
					<span></span>
					<span></span>
				</div>
			</div>
			<div class="look-more">查看更多 <img src="../../../assets/icon-next20.png"></div>
		</div>
		<div class="hot-singer">
			<h2>人气歌手</h2>
			<!-- <div class="singer-info" @click="ToSingerDetaile(firstTinguid,bigimg1,firstname)">
				<div class="detail">
					<div class="singer-icon"><img :src="img1url"></div>
					<div class="info">
						<p class="desc">台北捷运报捷运美少女林依晨</p>
						<p class="live-style">首发直播</p>
						<p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p>
					</div>
					<div class="go"><img src="../../../assets/icon-next32.png"></div>
				</div>
				<div class="hr"></div>
			</div>
			<div class="singer-info" @click="ToSingerDetaile(secondTinguid,bigimg2,secodname)">
				<div class="detail">
					<div class="singer-icon"><img :src="img2url"></div>
					<div class="info">
						<p class="desc">最受欢迎的十大亚洲男艺人</p>
						<p class="live-style"></p>
						<p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p>
					</div>
					<div class="go"><img src="../../../assets/icon-next32.png"></div>
				</div>
				<div class="hr"></div>
			</div> -->
			<div class="singer-info" @click="ToSingerDetaile(singerinfo)">
				<div class="detail">
					<div class="singer-icon"><img :src="singerinfo.smallImg"></div>
					<div class="info">
						<p class="desc">新中国60年最有影响力文化人物</p>
						<p class="live-style"></p>
						<p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p>
					</div>
					<div class="go"><img src="../../../assets/icon-next32.png"></div>
				</div>
				<div class="hr"></div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../components/music_player'
	export default{
		name:"musicSinger",
		data(){
			return{
				// img1url:'',
				// img2url:'',
				// img3url:'',
				// firstTinguid:'',
				// secondTinguid:'',
				// thirdTinguid:'',
				// bigimg1:'',
				// bigimg2:'',
				// bigimg3:'',
				// firstname:'',
				// secodname:'',
				// thirdname:''
				singerinfo:{
					smallimg:'',
					tinguid:'',
					bigimg:'',
					singername:'',
					songsTotal:'',
					fansCount:'',
					albumTotal:'',
					MVTotal:'',
					description:''
				}
			}		
		},
		components:{
			musicPlayer
		},
		methods:{
			ToSingerDetaile(singerinfo){
				// console.log(tinguid);
				this.$store.dispatch('getSingerInfo',singerinfo);
				this.$router.push('/sinDet')
			}
		},
		created(){
			var url =  this.HOST;
			this.$axios.get(url,{
				params:{
					format:'json',
					method:'baidu.ting.artist.getInfo',
					tinguid:1091
				}
			})
			.then(res =>{
				// console.log(res);
				var data = res.data;
				this.singerinfo={
					smallImg:data.avatar_s180,
					tinguid:data.ting_uid,
					bigImg:data.avatar_s1000,
					singerName:data.name,
					songsTotal:data.songs_total,
					fansCount:data.listen_num,
					albumTotal:data.albums_total,
					MVTotal:data.mv_total,
					description:data.intro
				}
			})
			// this.$axios.get(url,{
			// 	params:{
			// 		format:'json',
			// 		method:'baidu.ting.artist.getInfo',
			// 		tinguid:1093
			// 	}
			// })
			// .then(res =>{
			// 	console.log(res);
			// 	var data = res.data;
			// 	this.img1url = data.avatar_s180;
			// 	this.firstTinguid=data.ting_uid;
			// 	this.bigimg1=data.avatar_s1000;
			// 	this.firstname = data.name;
			// });
			// this.$axios.get(url,{
			// 	params:{
			// 		format:'json',
			// 		method:'baidu.ting.artist.getInfo',
			// 		tinguid:1092
			// 	}
			// })
			// .then(res =>{
			// 	console.log(res);
			// 	var data = res.data;
			// 	this.img2url = data.avatar_s180;
			// 	this.secondTinguid=data.ting_uid;
			// 	this.bigimg2=data.avatar_s1000;
			// 	this.secodname = data.name;
			// });
		}
	}
</script>
<style scoped lang="less">
.music-player-outer{
	overflow: hidden;
	background-color: #dbd7df;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
	background-color: #fff;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.music-sort{
	padding-top: 32/100rem;
	padding-left: 20/100rem;
	background-color: #fff;
}
.music-sort>div>div{
	float: left;
}
.music-sort .kinds span{
	width: 118/100rem;
	display: block;
	float: left;
	font-size: 24 / 100rem
}
.music-sort .kinds .onew{
	text-indent: 12/100rem;
}
.music-sort .title{
	font-size: 30/100rem;
	margin-right: 78/100rem;
}
.music-sort .area{
	margin-bottom: 40/100rem;
	overflow: hidden;
}
.music-sort .type{
	margin-bottom: 40/100rem;
	overflow: hidden;
}
.music-sort .style{
	margin-bottom: 50/100rem;
	overflow: hidden;
}
.look-more{
	text-align: center;
	font-size: 20/100rem;
	padding-bottom: 38/100rem;
}
.look-more img{
	width: 12/100rem;
}
.hot-singer{
	width: 100%;
	margin-top: 20/100rem;
	background-color: #fff;
	overflow: hidden;
	padding-top: 30/100rem;
	// margin-bottom: 108 / 100rem;
}
.hot-singer h2{
	font-size: 30/100rem;
	margin-bottom: 24/100rem;
	margin-left: 20/100rem;
}
.singer-info{
	margin-left: 20/100rem;
	margin-bottom: 18/100rem;	
}
.singer-info .singer-icon{
	width: 180/100rem;
	height: 180/100rem;
}
.singer-info .singer-icon img{
	width: 100%;
	height: 100%;
}
.singer-info .info{
	font-size: 24/100rem;
	padding-top: 30/100rem;
	padding-left: 15/100rem;
}
.singer-info .info .live-style{
	margin-top: 20/100rem;
	margin-bottom: 38/100rem;
	height: 24/100rem;
}
.singer-info .hr{
	width: 528/100rem;
	height: 1px;
	background-color:#ccc;
	margin-top: 14/100rem;
	margin-left: 172/100rem;
}
.detail{
	overflow: hidden;
	position: relative;
}
.detail>div{
	float: left;
}
.detail  .go{
	position: absolute;
	width: 20/100rem;
	height: 32/100rem;
	top:76/100rem;
	right: 20/100rem;
}
.detail  .go img{
	width: 100%;
	height: 100%
}
</style>